<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  pieData: {
    type: Object,
    default: () => {},
  },
})

const pieChartRef = ref(null)

function draw() {
  let myChart = echarts.init(pieChartRef.value)

  let option = {
    color: props.pieData.color,
    title: {
      text: props.pieData.title,
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal',
      },
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: 'bottom',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        fontSize: 10,
      },
    },
    series: [
      {
        type: 'pie',
        radius: '60%',
        label: {
          normal: {
            show: true,
            position: 'inner',
            textStyle: {
              fontSize: 10,
              color: '#ffffff',
            },
            formatter: function (data) {
              return data.percent.toFixed(1) + '%'
            },
          },
        },
        data: props.pieData.data,
      },
    ],
  }

  myChart.setOption(option)

  window.addEventListener('resize', function () {
    myChart.resize()
  })
}

onMounted(() => {
  draw()
})
</script>

<template>
  <div ref="pieChartRef" class="pie-chart"></div>
</template>

<style scoped>
.pie-chart {
  width: 150px;
  height: 150px;
  background: var(--vt-c-white);
}
</style>
